 import {useState,useEffect,useRef} from 'react';
 

function App(){ 
//  被添加的数据temp
//  计划列表list=[{done:true,title:"学习小程序",status:1}]
//  添加,删除,更新
  const [temp,setTemp] =useState(""); //临时要被添加的数据
  const [list,setList] = useState([   //计划清单,done是否完成,title标题 status状态1 正常2修改
    {done:true,title:"学习vue3",status:1},
    {done:false,title:"学习小程序",status:1}
  ]);
  // 添加
  const addList=(e)=>{
    // console.log(e);
    if(e.key=="Enter"){
      // 添加一个元素
      list.push({done:false,status:1,title:temp});
      // 更新视图list
      setList(list);
      // 更新temp
      setTemp("");
    }
   

  }
  const updateList=(e,item)=>{   
    // 查找item是list第几个
    var index = list.findIndex(it=>it.title==item.title);
    // 获取表单checked的值
    var flag = e.target.checked;
    // 更新list
    list[index].done = flag;  
    console.log(index,flag,list);   
    // 更新视图
    setList([...list]);
  }
  // 删除
  const delList=(item)=>{
    // 查找index
    var index = list.findIndex(it=>it.title==item.title);
    // 删除index个
    list.splice(index,1);
    // 更新视图与数据
    setList([...list])
  }
  return (<div>
    <h1>美妙清单</h1>    
    <div>
      <p>{temp}</p>
      {/* 被状态state控制表单称为授控表单,被ref控制的表单称为飞受控表单 */}
      <input type="text" value={temp} onChange={(e)=>{setTemp(e.target.value)}} onKeyUp={addList}/>
    </div>
    <h3>正在进行{list.filter(item=>!item.done).length}</h3>
    <div className='list'>
        {list.filter(item=>!item.done).map(item=>(<div key={item.title}>
          <input type="checkbox" checked={item.done} onChange={e=>{
            updateList(e,item)
          }}/>
          <span>{item.title}</span>
          <button onClick={()=>delList(item)}>x</button>
        </div>))}
    </div>
    <h3>已经完成{list.filter(item=>item.done).length}</h3>
    <div className='list'>
        {list.filter(item=>item.done).map(item=>(<div key={item.title}>
          <input type="checkbox"  checked={item.done}   onChange={e=>{
            updateList(e,item)
          }}/>
          <span>{item.title}</span>
          <button  onClick={()=>delList(item)}>x</button>
        </div>))}
    </div>
    </div>) 
}
export default App;

// list.filter(()=>回调函数)
// 过滤数组,回调函数返回true保留,返回false则过滤掉

// list.map(()=>返回)
// 由现有的数据list映射出一个新的列表